<script setup>
import {ref} from 'vue'

const checked = ref(true)
const user = ref([
  {id: 1, name: '李四',checked:false},
  {id: 2, name: '王五',checked:false},
  {id: 3, name: '赵六',checked:false},
  {id: 4, name: '郑七',checked:false},
  {id: 5, name: '周八',checked:false},
  {id: 6, name: '王六',checked:false},
])

const book = {}
book.id = 6
book.name = 'jack'
book.pf = i => i*i
console.log(book)
console.log(book.pf(6))


const cc = ref([])

function add(item) {
  console.log(item)
  item.checked = !item.checked
  cc.value.splice(0,cc.value.length)
  console.log(cc)

  user.value.filter(item=>item.checked).forEach(item=>{
    cc.value.push(item.id)
  })
  console.log(cc)
}

function myall(){
  user.value.forEach(item=>item.checked=true)
  cc.value.splice(0,cc.value.length)
  user.value.filter(item=>item.checked).forEach(item=>{
    cc.value.push(item.id)
  })
}
function mycancel(){
  user.value.forEach(item=>item.checked=false)
  cc.value.splice(0,cc.value.length)
  user.value.filter(item=>item.checked).forEach(item=>{
    cc.value.push(item.id)
  })
}

function myno(){
  user.value.forEach(item=>item.checked=!item.checked)
  cc.value.splice(0,cc.value.length)
  user.value.filter(item=>item.checked).forEach(item=>{
    cc.value.push(item.id)
  })
}
</script>

<template>
  <button @click="myall">全选</button>
  <button @click="mycancel">取消</button>
  <button @click="myno">反选</button>
  <label><input type="checkbox" v-model="checked"> {{ checked }}</label>
  <br>
  <label v-for="item in user"><input type="checkbox"  :checked="item.checked" @click="add(item)" :value="item.id">{{ item.name }}</label>
  <hr>
  {{ cc }}
</template>

<style>
label {
  margin-right: 15px
}

</style>
